บทความนี้จะขอกล่าวถึงการเริ่มต้นใช้งาน JQuery Mobile Framework ครับ ให้ผู้อ่านทำการดาวน์โหลด Framework ดังกล่าวมาก่อน โดยสามารถดาวน์โหลดได้จากลิงค์ข้างล่างเป็นเว็บไซต์ทางการของ JQuery Mobile Framework หรือแนะนำให้ดาวน์โหลดตัวอย่าง Source Code + Resource ของบทความนี้ที่ด้านล่างครับ และทดลองทำตามได้ทันทีครับ
หลังจากดาวน์โหลดเสร็จ ต่อมาให้ทำการติดตั้ง Framework เข้ากับ HTML Page ของคุณตาม Source Code ด้านล่างครับ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/default/jquery.mobile.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"><h1>My First App</h1></div>
<div align="center" data-role="content">Hello, JQuery Mobile :)</div>
</div>
</body>
</html>
อธิบายโปรแกรมส่วนสำคัญ
1. data-role="page" คือการระบุถึงจุดเริ่มต้นของการแสดงผล ในหนึ่ง HTML หรือ 1 File สามารถมี data-role ได้มากกว่า 1 จุด เพื่อทำ Multiple Page Id (ยังไม่ขอกล่าวถึงในบทความนี้ครับ)
2. data-role="header" คือการระบุส่วนหัวด้านบนของ Application
3. data-role="content" คือการระบุส่วนแสดงเนื้อหาของ Application
ข้อสังเกต จะมีการใช้คำสั่ง (Tags) data-role เสนอในการระบุในแต่ละส่วนของ Application
ผลลัพธ์
ทดลองกันดูนะครับ สำหรับใครที่สนใจอยากศึกษา JQuery Mobile Framework ครับ
